<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab切换实例</title>
		<meta http-equiv="keywords" content="">
	    <meta http-equiv="description" content="">
	    <!--<meta http-equiv="X-UA-Compatible" content=“IE=EmulateIE8″>-->
	    <meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
	    <meta name="renderer" content="webkit">
	    <link rel="stylesheet" href="style/css/base/MyReset.css" />
	    <link rel="stylesheet" href="style/css/common/common.css" />
	    <link rel="stylesheet" href="style/css/common/main.css" />
	    <link rel="stylesheet" href="style/css/page/tab.css" />
	</head>
	<body>
		<div class="Ct">
			<div>
				<p class="marginTop20">
					<label class="fontSize16 fontWeight color_3">类型一</label>
					<label class="fontSize14  color_3">js原生tab切换</label>
				</p>
				<div>
					<div class="box" id="box">
					    <ul>
					        <li class="now">jauery</li>
					        <li>html</li>
					        <li>css</li>
					        <li>ajax</li>
					    </ul>
					    <div class="list" id="list">
					        <div class="text" style="display:block;">jauery</div>
					        <div class="text">html</div>
					        <div class="text">css</div>
					        <div class="text">ajax</div>
					    </div>
					</div>
				</div>
				<p class="marginTop20">
					<label class="fontSize16 fontWeight color_3">类型二</label>
					<label class="fontSize14  color_3">依赖jquery的tab切换,相比原生来说，jquery的tab切换代码更少</label>
				</p>
				<div class="marginTop20">
					<div class="box" id="box1">
					    <ul>
					        <li class="now">jauery</li>
					        <li>html</li>
					        <li>css</li>
					        <li>ajax</li>
					    </ul>
					    <div class="list1" id="list1">
					        <div class="text" style="display:block;">jauery</div>
					        <div class="text">html</div>
					        <div class="text">css</div>
					        <div class="text">ajax</div>
					    </div>
					</div>
				</div>
				<p class="marginTop20">
					<label class="fontSize16 fontWeight color_3">类型三</label>
					<label class="fontSize14  color_3">选项卡单击切换内容</label>
				</p>
				<div id="box2" class="marginTop20">
					<div class="box">
						<ul>
					        <li class="now">jauery</li>
					        <li>html</li>
					        <li>css</li>
					        <li>ajax</li>
					    </ul>
						<div class="list1" id="list2">
							<div class="text" style="display:block;">jauery</div>
					        <div class="text">html</div>
					        <div class="text">css</div>
					        <div class="text">ajax</div>
						</div>
					</div>
				</div>
				<p class="marginTop20">
					<label class="fontSize16 fontWeight color_3">类型四</label>
					<label class="fontSize14  color_3">选项卡定时轮播切换内容</label>
				</p>
				<div id="box3" class="marginTop20">
					<div class="newbox">
						<ul>
							<li><a href="javascript:void(0)">jauery</a></li>
							<li><a href="javascript:void(0)">html</a></li>
							<li><a href="javascript:void(0)">css</a></li>
							<li><a href="javascript:void(0)">ajax</a></li>
						</ul>
					</div>
					<div class="boxtwo">
						<ul>
							<li class="show">jauery</li>
							<li class="hide">html</li>
							<li class="hide">css</li>
							<li class="hide">ajax</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	<script type="text/javascript" src="style/js/base/jquery-1.9.1.min.js" ></script>
	<script type="text/javascript" src="style/js/page/tab.js" ></script>
	</body>
</html>
